<template>
	<view>
		<comHeader :config="navConfig" />
		<view class="man">
			<view>
				<view class="big">切换账户登录</view>
				<view class="tips">轻触账户以登录</view>
			</view>
		</view>
		<view class="telnum">
			<view class="info-line" v-for="(item,index) in typeData" :key='index'>
				<image class="img" :src="item.img"></image>
				<text class="pay-label">{{item.name}}</text><br>
				<text class="num">{{item.num}}</text>
				<image v-if="item.isUsed" class="use" src="/static/payIcon/use.png" mode="" ></image>
			</view>
		</view>
		<navigator url="SwitchingAccountsLogin" class="btn">
			<image src="../../../../static/myPic/qhtj.png" mode=""></image>
			<text>添加账号</text>
		</navigator>
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon/uni-icon.vue"
	export default {
		components: {
			uniIcon
		},
		data() {
			return {
				navConfig: {
					isFixed: false, //是否absolute布局
					comScroll:0,
					left: {
	
						isShowLeft: true,
						leftGobackColor: 'black', //左边返回icon颜色
					},
					mid: {
						isShowMid: true,
						text: '',
						textColor: ''
					},
					right: {
						text: '',
						isShowRight: false,
						ico: '', //右侧图标地址
						isShowRightIco: '' //是否显示右侧图标
					}
				},
				typeData:[
					{
						name:'昵称',
						num:'188445575',
						img:'/static/myPic/touxiang.png',
						isUsed:true,
						id:1
					},
					{
						name:'昵称',
						num:'188445575',
						img:'/static/myPic/touxiang.png',
						isUsed:false,
						id:2
					},
					
				]
			}
			
		},
		methods:{
			chooseType(id){
				this.typeData.forEach(item =>{
					if(item.isUsed && item.id!=id){
						item.isUsed = false
					}else if(item.id == id){
						item.isUsed = true
						this.nowType = item.name
					}
				})
				
			}
		}
	}
</script>

<style>
	.man {
		display: flex;
		justify-content: space-between;
		width: 90%;
		margin: auto;
		padding: 25upx 0upx;
		border-bottom: 1px solid #EEEEEE;
		margin-top: 100upx;
		
	}
	
	.mainback .man:last-child {
		border-bottom: 0upx solid #FFFFFF !important;
	}
	.big{
		color: #333333;
		font-weight: bold;
		font-size: 36upx;
		margin-left: 47upx;
	}
	
	.tips {
		font-size: 24upx;
		color: #999999;
		margin-top:20upx;
		margin-left: 47upx;
	}
	.telnum{
		margin-left: 47upx;

	}
	.info-line{
		/* height: 160upx; */
		/* line-height: 80upx; */
		/* margin-top: 20upx; */
		margin-bottom: 50upx;
		width: 660upx;
		/* border-bottom: rgba(0,0,0,0.3) solid 1upx; */
		
		
	}
	.pay-label{
		font-size: 30upx;
		line-height: 80upx;
	}
	.info-line .img{
		width: 80upx;
		height: 80upx;
		margin-top: 20upx;
		float: left ;
		margin-right: 20upx;
	}
	.num{
		margin-bottom: 150upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: rgba(51,51,51,1);
		
	}
	.use{
		width: 31upx;
		height: 26upx;
		margin-right: 10upx;
		margin-top: 20upx;
		margin-left: 20upx;
		float: right;
	}
	.btn{
		width: 651upx;
		height: 74upx;
		background: #C9D3E2;
		margin-left: 46upx;
		margin-top: 260upx;
		border-radius: 35upx;
	}
	.btn image{
		width: 43upx;
		height: 43upx;
		/* position: absolute; */
		margin-left: 250upx;
		margin-top: 18upx;
		float: left;
	}
	.btn text{
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: rgba(51,51,51,1);
		margin-left: 10upx;
		margin-top: 19upx;
		position: absolute;
	}
</style>
